<template>
	<view>
		<view class="header">
			<view class="navbar" :style="{height: systemBarHeight + 'px'}">
			</view>
			<view class="title">
				<view class="fh" >
					<image src="/static/index/fh1.png" @click="fh()" mode=""></image>
				</view>
			</view>

			<view class="tabs">
				<v-tabs v-model="current" color="#ffffff" active-color="#FEDBA4" line-color="#FEE0B2" :line-scale="0.3"
					:tabs="tabs" :scroll=" false" bgColor=' rgba(255,255,255,0)' @change="changeTab"></v-tabs>
			</view>

			
		</view>
<view class="product">
				<!-- 1 -->
				<view class="product_item">
					<view class="product_item_lf">
						<view class="product_item_lf2">
							<image src="/static/logo.png" mode=""></image>
						</view>
						<view class="product_item_lf1">
							<image src="/static/index/top1.png" mode=""></image>
						</view>
					</view>
					<view class="product_item_rg">
						<view class="product_item_rg_tit">
							<text>CyberDog仿生四足机器人（工程探索版）</text>
						</view>
						<view class="product_item_rg_bom">
							<view class="product_item_rg_bom1">
								<text class="type1">身高</text>
								<text class="type2">400mm</text>
							</view>
							<view class="product_item_rg_bom1">
								<text class="type1">身高</text>
								<text class="type2">400mm</text>
							</view>
							<view class="cifrom">
								<button type="default">去咨询</button>
							</view>
						</view>
					</view>
				</view>
				
				<!-- 2 -->
				<view class="product_item">
					<view class="product_item_lf">
						<view class="product_item_lf2">
							<image src="/static/logo.png" mode=""></image>
						</view>
						<view class="product_item_lf1">
							<image src="/static/index/top2.png" mode=""></image>
						</view>
					</view>
					<view class="product_item_rg">
						<view class="product_item_rg_tit">
							<text>CyberDog仿生四足机器人（工程探索版）</text>
						</view>
						<view class="product_item_rg_bom">
							<view class="product_item_rg_bom1">
								<text class="type1">身高</text>
								<text class="type2">400mm</text>
							</view>
							<view class="product_item_rg_bom1">
								<text class="type1">身高</text>
								<text class="type2">400mm</text>
							</view>
							<view class="cifrom">
								<button type="default">去咨询</button>
							</view>
						</view>
					</view>
				</view>
				<!-- 3 -->
				<view class="product_item">
					<view class="product_item_lf">
						<view class="product_item_lf2">
							<image src="/static/logo.png" mode=""></image>
						</view>
						<view class="product_item_lf1">
							<image src="/static/index/top3.png" mode=""></image>
						</view>
					</view>
					<view class="product_item_rg">
						<view class="product_item_rg_tit">
							<text>CyberDog仿生四足机器人（工程探索版）</text>
						</view>
						<view class="product_item_rg_bom">
							<view class="product_item_rg_bom1">
								<text class="type1">身高</text>
								<text class="type2">400mm</text>
							</view>
							<view class="product_item_rg_bom1">
								<text class="type1">身高</text>
								<text class="type2">400mm</text>
							</view>
							<view class="cifrom">
								<button type="default">去咨询</button>
							</view>
						</view>
					</view>
				</view>
				<!-- 4 -->
				<view class="product_item">
					<view class="product_item_lf">
						<view class="product_item_lf2">
							<image src="/static/logo.png" mode=""></image>
						</view>
						<view class="product_item_lf3">
							<image src="/static/index/top4.png" mode=""></image>
						</view>
					</view>
					<view class="product_item_rg">
						<view class="product_item_rg_tit">
							<text>CyberDog仿生四足机器人（工程探索版）</text>
						</view>
						<view class="product_item_rg_bom">
							<view class="product_item_rg_bom1">
								<text class="type1">身高</text>
								<text class="type2">400mm</text>
							</view>
							<view class="product_item_rg_bom1">
								<text class="type1">身高</text>
								<text class="type2">400mm</text>
							</view>
							<view class="cifrom">
								<button type="default">去咨询</button>
							</view>
						</view>
					</view>
				</view>
				<!-- 5 -->
				<view class="product_item">
					<view class="product_item_lf">
						<view class="product_item_lf2">
							<image src="/static/logo.png" mode=""></image>
						</view>
						<view class="product_item_lf3">
							<image src="/static/index/top5.png" mode=""></image>
						</view>
					</view>
					<view class="product_item_rg">
						<view class="product_item_rg_tit">
							<text>CyberDog仿生四足机器人（工程探索版）</text>
						</view>
						<view class="product_item_rg_bom">
							<view class="product_item_rg_bom1">
								<text class="type1">身高</text>
								<text class="type2">400mm</text>
							</view>
							<view class="product_item_rg_bom1">
								<text class="type1">身高</text>
								<text class="type2">400mm</text>
							</view>
							<view class="cifrom">
								<button type="default">去咨询</button>
							</view>
						</view>
					</view>
				</view>
				<!-- 6 -->
				<view class="product_item">
					<view class="product_item_lf">
						<view class="product_item_lf2">
							<image src="/static/logo.png" mode=""></image>
						</view>
						<view class="product_item_lf3">
							<image src="/static/index/top6.png" mode=""></image>
						</view>
					</view>
					<view class="product_item_rg">
						<view class="product_item_rg_tit">
							<text>CyberDog仿生四足机器人（工程探索版）</text>
						</view>
						<view class="product_item_rg_bom">
							<view class="product_item_rg_bom1">
								<text class="type1">身高</text>
								<text class="type2">400mm</text>
							</view>
							<view class="product_item_rg_bom1">
								<text class="type1">身高</text>
								<text class="type2">400mm</text>
							</view>
							<view class="cifrom">
								<button type="default">去咨询</button>
							</view>
						</view>
					</view>
				</view>
				<!-- 7 -->
				<view class="product_item">
					<view class="product_item_lf">
						<view class="product_item_lf2">
							<image src="/static/logo.png" mode=""></image>
						</view>
						<view class="product_item_lf3">
							<image src="/static/index/top7.png" mode=""></image>
						</view>
					</view>
					<view class="product_item_rg">
						<view class="product_item_rg_tit">
							<text>CyberDog仿生四足机器人（工程探索版）</text>
						</view>
						<view class="product_item_rg_bom">
							<view class="product_item_rg_bom1">
								<text class="type1">身高</text>
								<text class="type2">400mm</text>
							</view>
							<view class="product_item_rg_bom1">
								<text class="type1">身高</text>
								<text class="type2">400mm</text>
							</view>
							<view class="cifrom">
								<button type="default">去咨询</button>
							</view>
						</view>
					</view>
				</view>
			</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				systemBarHeight: 0,
				current: 0,
				tabs: ['周榜', '月榜', '年榜']
			}
		},
		mounted() {
			this.getSysteminfo()
		},
		methods: {
			/* 手机顶部高度 */
			getSysteminfo() {
				uni.getSystemInfo({
					success: res => {
						this.systemBarHeight = res.statusBarHeight;
					}
				});
			},
			fh() {
				uni.navigateBack({
					delta: 1 // 返回的页面层级，1表示返回上一页
				});
			},
			changeTab(index) {
				console.log('当前选中索引：' + index)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.header {
		background-image: url("");
		background-size: 100% 515.27rpx;
		background-repeat: no-repeat;
		height: 515.27rpx;
	}

	.title {
		display: flex;
		align-items: center;
		padding-right: 76rpx;
		margin-top: 13rpx;

		.fh {
			>image {
				width: 61rpx;
				height: 61rpx;
				margin-left: 15rpx;
			}
		}

	}

	.tabs {

		width: 60%;
		margin: 238.55rpx auto 0;
	}

	.product {
		margin-top: -19rpx;
		width: 750rpx;
		padding-top: 40rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 0rpx 0rpx;

		.product_item {
			width: 91%;
			margin:0 auto 48rpx;
			display: flex;

			.product_item_lf {
				height: 172rpx;
				width: 229rpx;

				.product_item_lf1 {
					position: relative;
					top: -190rpx;
					left: -10rpx;
					z-index: 11;

					>image {
						width: 57.25rpx;
						height: 80.15rpx;
					}
				}

				.product_item_lf2 {

					>image {
						width: 229rpx;
						height: 172rpx;
						border-radius: 0rpx 0rpx 0rpx 0rpx;
					}
				}
				.product_item_lf3{
					position: relative;
					top: -190rpx;
					left: -10rpx;
					z-index: 11;
					
					>image {
						width: 76.34rpx;
						height: 38.17rpx;
					}
					
				}
			}

			.product_item_rg {
				margin-left: 30rpx;

				.product_item_rg_tit {

					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 31rpx;
					color: #152034;
				}

				.product_item_rg_bom {
					display: flex;
					align-items: center;
					margin-top: 17rpx;

					.product_item_rg_bom1 {
						display: flex;
						flex-direction: column;
						margin-right: 45rpx;

						.type1 {

							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 23rpx;
							color: #7D8CA4;

						}

						.type2 {
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 23rpx;
							color: #45516B;
							margin-top: 10rpx;
						}

						.cifrom {
							margin-left: auto;

							>button {}
						}
					}
				}
			}
		}
	}

	.cifrom button {
		width: 153rpx;
		height: 69rpx;
		background: #1677FF;
		border-radius: 38rpx 38rpx 38rpx 38rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 27rpx;
		color: #FFFFFF;
		line-height: 31rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>